import { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Image } from 'expo-image';

const PLACEHOLDER = require('../assets/images/partial-react-logo.png');

type CircleThumbnailProps = {
  uri?: string | null;
  size?: number;
  backgroundColor?: string;
};

export function CircleThumbnail({ uri, size = 56, backgroundColor = '#f5e5f0' }: CircleThumbnailProps) {
  const [failed, setFailed] = useState(false);
  const diameter = Math.max(size, 8);
  const source = !uri || failed ? PLACEHOLDER : { uri };

  return (
    <View
      style={[
        styles.container,
        {
          width: diameter,
          height: diameter,
          borderRadius: diameter / 2,
          backgroundColor,
        },
      ]}
    >
      <Image
        source={source}
        style={{ width: diameter, height: diameter, borderRadius: diameter / 2 }}
        contentFit="cover"
        transition={150}
        onError={() => setFailed(true)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
  },
});

